---
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
import * as CONFIG from '../../config';
import AstroLogo from './AstroLogo.astro';
import SkipToContent from './SkipToContent.astro';
import SidebarToggle from './SidebarToggle';
import LanguageSelect from './LanguageSelect';
import Search from './Search';
import Logo from './Logo';

type Props = {
	currentPage: string;
	hideLogo?: boolean;
};

const { currentPage, hideLogo = false } = Astro.props as Props;
const lang = getLanguageFromURL(currentPage);

---

<header>
	<SkipToContent />
	<nav class="nav-wrapper" title="Top Navigation">
		<div class="menu-toggle">
			<SidebarToggle client:idle />
		</div>
		<div class="logo flex">
			
		</div>
		<div style="flex-grow: 1;">
			<a href="/">
				{ hideLogo ? null : <Logo className="logo-img" /> }
			</a>
		</div>
		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
		<!-- <div class="search-item"> -->
			<!-- <Search client:idle /> -->
		<!-- </div> -->
	</nav>
</header>

<style>
	header {
		z-index: 11;
		height: var(--theme-navbar-height);
		width: 100%;
		background-color: var(--theme-navbar-bg);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: sticky;
		top: 0;
	}

	.header-link {
		color: var(--theme-text);
		margin: 0;
		/* text-decoration: none; */
	}

	.logo-img {
		width: 40vh;
	}

	.logo {
		flex: 1;
		display: flex;
		overflow: hidden;
		width: 30px;
		font-size: 2rem;
		flex-shrink: 0;
		font-weight: 600;
		line-height: 1;
		color: hsla(var(--color-base-white), 100%, 1);
		gap: 0.25em;
		z-index: -1;
	}

	.logo a {
		display: flex;
		padding: 0.5em 0.25em;
		margin: -0.5em -0.25em;
		text-decoration: none;
		font-weight: bold;
	}

	.logo a {
		transition: color 100ms ease-out;
		color: var(--theme-text);
	}

	.logo a:hover,
	.logo a:focus {
		color: var(--theme-text-accent);
	}

	.logo h1 {
		display: none;
		font: inherit;
		color: inherit;
		margin: 0;
	}

	.nav-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1em;
		width: 100%;
		/* max-width: 82em; */
		/* override */
		margin-top: 1.5em;
		max-width: 99em;
		padding: 0 1rem;
	}

	@media (min-width: 50em) {
		.logo-img {
			height: 85px;
			width: inherit;
		}

		header {
			position: static;
			padding: 2rem 0rem;
		}

		.logo {
			width: auto;
			margin: 0;
			z-index: 0;
		}

		.logo h1 {
			display: initial;
		}

		.menu-toggle {
			display: none;
		}
	}

	/** Style Algolia */
	:root {
		--docsearch-primary-color: var(--theme-accent);
		--docsearch-logo-color: var(--theme-text);
	}

	.search-item {
		display: none;
		position: relative;
		z-index: 10;
		flex-grow: 1;
		padding-right: 0.7rem;
		display: flex;
		max-width: 200px;
	}

	@media (min-width: 50em) {
		.search-item {
			max-width: 400px;
		}
	}
</style>

<style is:global>
	.search-item > * {
		flex-grow: 1;
	}
</style>
